<template>
  <div class="root">
    <router-link to="/" :class="selectNav==1?'dv1s':'dv1'"></router-link>
    <router-link to="/cif" :class="selectNav==2?'dv2s':'dv2'"></router-link>
    <router-link to="/xiaoms" :class="selectNav==3?'dv3s':'dv3'"></router-link> 
    <router-link to="/gouwuche" :class="selectNav==4?'dv4s':'dv4'"></router-link> 
    <router-link to="/iechong" :class="selectNav==5?'dv5s':'dv5'"></router-link> 
  </div>
</template>

<script>
export default {
  name: "buttomtab",
  props:["selectNav"],
  mounted() {
    // console.log(this.selectNav);
  },
};
</script>

<style lang="less" scoped>
.root {
  display: flex;
  width: 100%;
  height: 1.04rem;
  a {
    display: block;
    margin: auto;
    width: .9rem;
    height: .9rem;
    background: url(../assets/jlt.png) 0 0 no-repeat;
    background-size: 7.7rem auto;
  }
  .dv1 {
    background-position: 0 -0.04rem;
  }
  .dv1s {
    background-position: 0 -1.16rem;
  }
  .dv2 {
    background-position: -1.04rem -0.04rem;
  }
  .dv2s {
    background-position: -1.1rem -1.16rem;
  }
  .dv3{
      background-position: -3.62rem -0.04rem;
  }
  .dv3s{
      background-position: -3.62rem -1.16rem;
  }
  .dv4{
      background-position: -2.28rem -0.04rem;
  }
  .dv4s{
      background-position: -2.26rem -1.16rem;
  }
  .dv5{
      background-position: -5.1rem -0.04rem;
  }
  .dv5s{
      background-position: -5.1rem -1.16rem;
  }
}
</style>